<template>
    <div class="statistics-box">
        <!-- 第一个列表 -->
        <statisticsTow
            @getDetailedFun="getDetailedFun"
            @emptyFun="emptyFun1"
            ref="statisticsTow"
        ></statisticsTow>
        <!-- 统计明细 -->
        <statisticsDetailed
            @getDetailsFun="getDetailsFun"
            ref="statisticsDetailed"
        ></statisticsDetailed>
        <!-- 明细详情 -->
        <statisticsDetails ref="statisticsDetails"></statisticsDetails>
    </div>
</template>

<script>
import statisticsTow from "./statisticsTow";
import statisticsDetailed from "./statisticsDetailed";
import statisticsDetails from "./statisticsDetails";

export default {
    props: [],
    components: { statisticsTow, statisticsDetailed, statisticsDetails },
    computed: {},
    data() {
        return {};
    },
    created() {},
    mounted() {},
    methods: {
        initData() {
            this.$refs.statisticsTow.getCountls();
        },
        // 获取统计明细
        getDetailedFun(item) {
            this.$refs.statisticsDetailed.initData(item);
        },
        // 获取明细详情
        getDetailsFun(item) {
            this.$refs.statisticsDetails.initData(item);
        },
        emptyFun1() {
            this.$refs.statisticsDetailed.emptyFun();
            this.$refs.statisticsDetails.emptyFun();
        },
    },
};
</script>

<style lang="scss" scoped >
.statistics-box {
    width: 100%;
    display: flex;
}
</style>
